<template>
  <view class="user">
    <!-- 用户信息 -->
    <user-info :user="userInfo" :base-info="baseInfo"></user-info>
    <view
      class="user__cover"
      :style="[coverStyle]"
      @touchstart="coverTouchstart"
      @touchmove="coverTouchmove"
      @touchend="coverTouchend"
    >
      <image class="user__cover-arc" src="/static/arc.png" />
      <view class="user__amount">
        <view class="user__amount-item" @click="gotoAccount">
          <text class="user__amount-num">{{ baseInfo.amount || 0 }}</text>
          <text>书币数量</text>
        </view>
        <view class="user__amount-item" @click="gotoBookList">
          <text class="user__amount-num">{{ baseInfo.books.length || 0 }}</text>
          <text>已阅读书籍</text>
        </view>
        <view class="user__amount-item" @click="gotoSharePage">
          <text class="user__amount-num">{{ baseInfo.share || 0 }}</text>
          <text>已邀请人数</text>
        </view>
      </view>
      <!-- 页面导航 -->
      <navigator-block @open-attendance="openAttendance" />
      <!-- cell -->
      <cell-block />
      <!-- 页面footer -->
      <!-- <PageFooter style="margin-top: 30px" /> -->
    </view>
    <!-- 签到弹窗 -->
    <AttendanceDialog :show.sync="showAttendance" @close="closeAttendance" />
  </view>
</template>
<script>
import { mapGetters } from "vuex";
import { setTitleNViewStyle } from "@/utils";
import UserInfo from "./components/UserInfo";
import Navigator from "./components/Navigator";
import History from "./components/History";
import CellBlock from "./components/CellBlock";
import AttendanceDialog from "@/components/attendance-dialog";
import PageFooter from "@/components/PageFooter";

let startY = 0,
  moveY = 0,
  pageAtTop = true;

export default {
  components: {
    UserInfo,
    NavigatorBlock: Navigator,
    History,
    CellBlock,
    PageFooter,
    AttendanceDialog,
  },
  data() {
    return {
      coverTransform: "translateY(0px)",
      coverTransition: "0s",
      moving: false,
      showAttendance: false,
    };
  },

  computed: {
    ...mapGetters(["hasLogin", "userInfo", "baseInfo"]),
    coverStyle() {
      return {
        transform: this.coverTransform,
        transition: this.coverTransition,
      };
    }
  },

  onShow() {
    if (this.hasLogin) this.fetchUserInfo();
  },

  // #ifndef MP
  onNavigationBarButtonTap(e) {
    const index = e.index;
    if (index === 0) {
      this.openAttendance();
    } else if (index === 1) {
      // 隐藏红点
      setTitleNViewStyle(0, false);
      uni.navigateTo({
        url: "/sub-packages/notice/index",
      });
    }
  },
  // #endif

  methods: {
    /**
     * 统一跳转接口,拦截未登录路由
     * navigator标签现在默认没有转场动画，所以用view
     */
    navTo(url) {
      if (!this.hasLogin) {
        url = "/pages/login/index";
      }
      uni.navigateTo({
        url,
      });
    },

    /**
     *  会员卡下拉和回弹
     *  1.关闭bounce避免ios端下拉冲突
     *  2.由于touchmove事件的缺陷（以前做小程序就遇到，比如20跳到40，h5反而好很多），下拉的时候会有掉帧的感觉
     *    transition设置0.1秒延迟，让css来过渡这段空窗期
     *  3.回弹效果可修改曲线值来调整效果，推荐一个好用的bezier生成工具 http://cubic-bezier.com/
     */
    coverTouchstart(e) {
      if (pageAtTop === false) {
        return;
      }
      this.coverTransition = "transform .1s linear";
      startY = e.touches[0].clientY;
    },

    coverTouchmove(e) {
      moveY = e.touches[0].clientY;
      let moveDistance = moveY - startY;
      if (moveDistance < 0) {
        this.moving = false;
        return;
      }
      this.moving = true;
      if (moveDistance >= 80 && moveDistance < 100) {
        moveDistance = 80;
      }

      if (moveDistance > 0 && moveDistance <= 80) {
        this.coverTransform = `translateY(${moveDistance}px)`;
      }
    },

    coverTouchend() {
      if (this.moving === false) {
        return;
      }
      this.moving = false;
      this.coverTransition = "transform 0.3s cubic-bezier(.21,1.93,.53,.64)";
      this.coverTransform = "translateY(0px)";
    },

    // 获取用户信息
    fetchUserInfo() {
      this.$http({
        method: "GET",
        url: "/api/front/user/info",
        errorText: "获取用户信息失败",
        needAuth: true,
      }).then((res) => {
        this.$store.commit("updateBaseInfo", res.data);
      });
    },

    // 打开签到弹窗
    openAttendance() {
      if (this.hasLogin) {
        this.showAttendance = true;
      } else {
        uni.showToast({ title: "尚未登录，请先登录书城", icon: "none" });
        setTimeout(() => {
          let redirect = "";
          if (this.$route && this.$route.fullPath) {
            redirect = encodeURIComponent(this.$route.fullPath);
          }
          uni.navigateTo({
            url: `/pages/login/index${
              redirect ? `?redirect=${redirect}&type=navigateBack` : ""
            }`,
          });
        }, 2000);
      }
    },

    // 关闭签到弹窗
    closeAttendance() {
      this.showAttendance = false;
    },

    // 前往阅读记录页面
    gotoBookList() {
      uni.switchTab({ url: "/pages/booklist/index" });
    },

    // 前往账户页面
    gotoAccount() {
      uni.navigateTo({ url: "/sub-packages/account/index" });
    },

    // 前往分享页面
    gotoSharePage() {
      uni.navigateTo({ url: '/sub-packages/share/index' });
    },
  },
};
</script>  
<style lang='scss'>
page {
  background: #f5f5f5;
}

%flex-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
%section {
  display: flex;
  justify-content: space-around;
  align-content: center;
  background: #fff;
  border-radius: 10rpx;
}

.user {
  &__cover {
    background: $page-color-base;
    margin-top: -150rpx;
    padding: 0 30rpx;
    position: relative;
    background: #f5f5f5;
    padding-bottom: 20rpx;
    &-arc {
      position: absolute;
      left: 0;
      top: -34rpx;
      width: 100%;
      height: 36rpx;
    }
  }

  &__amount {
    @extend %section;
    &-item {
      @extend %flex-center;
      flex-direction: column;
      height: 140rpx;
      font-size: $font-sm;
      color: #75787d;

      &:active {
        color: #333;
      }
    }
    &-num {
      font-size: $font-lg;
      color: $font-color-dark;
      margin-bottom: 8rpx;
    }
  }
}

.order-section {
  @extend %section;
  padding: 28rpx 0;
  margin-top: 20rpx;
  .order-item {
    @extend %flex-center;
    width: 120rpx;
    height: 120rpx;
    border-radius: 10rpx;
    font-size: $font-sm;
    color: $font-color-dark;
  }
  .yticon {
    font-size: 48rpx;
    margin-bottom: 18rpx;
    color: #4990e2;
  }
  .icon-shouhoutuikuan {
    font-size: 44rpx;
  }
}
</style>
